
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Virbot 51</title>
	<!-- <link rel="stylesheet" type="text/css" href="fonts/feather/style.css"> -->
	<link rel="stylesheet" type="text/css" href="css/demo.css" />
	<link rel="stylesheet" type="text/css" href="css/component.css" />
	<link href="https://cdn.bootcss.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
	<script src="js/modernizr.custom.js"></script>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
	<link href="https://cdn.bootcss.com/video.js/6.6.2/alt/video-js-cdn.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/video.js/6.6.2/video.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>
   
</head>
<body>
<div class="container">

<div style="padding: 20px 20px 0px 20px">
	<img src="images/logo5.png" width="90%" />
</div>
<h1 align="center" style="margin: 0px; padding: 10px">
	<img width="60%" src="images/virlogo.png" />
</h1>

<section class="slider" id="app-4">
	<div :class="index == 0 ? 'slide slide--current' : 'slide'" v-for="(video, index) in videos">
		<div class="slide__mover">
			<div class="zoomer flex-center">
				<img class="zoomer__image" src="images/imac.png" alt="iMac" />
				<div class="preview">
					<video width="315px" height="189px" controls="controls" class="video-js vjs-default-skin vjs-big-play-centered" data-setup="{}">
						<source id="source" :src="video.src" type="application/x-mpegURL"></source>
					</video>
				</div>
			</div>
		</div>
		<h2 class="slide__title"><span></span>{{ video.intro }}</h2>
	</div>
	
	<nav class="slider__nav">
		<button class="button button--nav-prev"><i class="icon icon-arrow-left"></i><span class="text-hidden">Previous product</span></button>
		<button class="button button--zoom"><i class="icon icon-play-circle"></i><span class="text-hidden">View details</span></button>
		<button class="button button--nav-next"><i class="icon icon-arrow-right"></i><span class="text-hidden">Next product</span></button>
	</nav>
</section>
</div>

<script>
var app4 = new Vue({
	el: '#app-4',
	data: {
		videos: [
		{ src: 'videos/LeeKaifu.m3u8', intro: 'Kai-fu Lee'},
		{ src: 'videos/Xiaoyi.m3u8', intro: 'I am Xiaoyi'},
		{ src: 'videos/rap.m3u8', intro: 'Rap'},
		{ src: 'videos/yueyu01.m3u8', intro: 'Zhu Cantonese'},
		{ src: 'videos/yueyu02.m3u8', intro: 'Another Cantonese'}
		]
	}
});
</script>
<script src="js/classie.js"></script>
<script src="js/dynamics.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
